<template>
  <div class="home" id="home" ref="home"></div>
  <div
    @click="add"
    style="
      position: absolute;
      top: 100px;
      left: 100px;
      z-index: inx;
      color: aquamarine;
    "
  >
    当前总分{{ totalScore }}
  </div>
  <div
    @click="jian"
    style="
      position: absolute;
      top: 200px;
      left: 100px;
      z-index: inx;
      color: aquamarine;
    "
  >
  当前队伍最高分{{ HighScore }}--{{ HighScoreAVE }}%
  </div>
  <!-- 用于显示行星的详细信息 -->
  <!-- 用于显示行星的详细信息 -->
 <!-- 用于显示行星的详细信息 -->
 <div
    v-if="planetDetailVisible"
    class="planet-detail"
    :style="{ top: detailPosition.top + 'px', left: detailPosition.left + 'px' }"
  >
    <h2>{{ planetMsg.name }} 的详情</h2>
    <p>{{ planetMsg.name }}队伍的得分是 {{ planetMsg.score }}</p>
  </div>
   <!--描述组件-->
   <!-- <PlanetText v-if="planetMsg" :msg="planetMsg" /> -->
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import circle from './line.js'
import { CSS2DRenderer ,CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'
import particle from './particle.js'
import universeImg from "./img/universe.jpg"; //宇宙
import { MagmaFlare } from "./magmaFlare/MagmaFlare";
import { TweenLite } from 'gsap';
let camera = null
let renderer = null
let labelRenderer = null
export default {
  name: 'lesson8',
  data() {
    return {
      K: 5,
      scene:null,
      totalScore: 100, // 初始总分
      HighScore: 0, // 最高分
      HighScoreAVE: 0, // 最高分和总分的比值
      planetDetailVisible: false,  // 控制详情显示状态
      increaseInterval: null, // 用于保存 setInterval 的引用
      detailPosition: { top: 0, left: 0 },  // 控制详情显示的位置
      planetMsg:null,
      manualHideFlag: false, // 手动隐藏/显示标记
      labelVisibilityState: {}, // 标签的显示状态
    }
  },
  computed: {
    list: function () {
      var that = this
      var list = [
        {
          name: '太阳',
          R: 10 * that.K, //天体半径
          URL: 'img/taiyang.jpg', //天体纹理路径
          modelPath: '/public/img/1748.gltf', // 飞船模型路径
          revolutionR: 0,
          score: 0, // 太阳没有得分字段
          orbit: null, // 每个行星都有一个轨道
        },
        {
          name: '水星',
          R: 0.8 * that.K, //天体半径
          URL: 'img/shuixing.jpg', //天体纹理路径
          // modelPath: '/public/img/1748.gltf', // 飞船模型路径
          modelPath: '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径
          R: 2 * that.K, //天体半径
          // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
          revolutionR: 120 * this.K, //公转半径
          score: 0, // 太阳没有得分字段
          orbit: null, // 每个行星都有一个轨道
        },
        {
          name: '金星',
          R: 2 * that.K, //天体半径
          URL: 'img/jinxing.jpg', //天体纹理路径
          modelPath: '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

          // modelPath: '/public/img/1748.gltf', // 飞船模型路径
          // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
          revolutionR: 120 * this.K, //公转半径
          score: 0, // 太阳没有得分字段
          orbit: null, // 每个行星都有一个轨道
        },
        {
          name: '地球',
          R: 2 * that.K, //天体半径
          URL: 'img/diqiu.jpg', //天体纹理路径
          // modelPath: '/public/img/18-rigged_ufo_gltf/Rigged_UFO_gltf/Rigged_Modular UFO 2.8.glb.gltf', // 飞船模型路径
          modelPath: '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

          // modelPath: '/public/img/1748.gltf', // 飞船模型路径
          // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
          revolutionR: 120 * this.K, //公转半径
          score: 20, // 太阳没有得分字段
          orbit: null, // 每个行星都有一个轨道
        },
        {
          name: '地球2',
          R: 2 * that.K, //天体半径
          URL: 'img/diqiu.jpg', //天体纹理路径
          modelPath: '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

          // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
          revolutionR: 120 * this.K, //公转半径
          score: 10, // 太阳没有得分字段
          orbit: null, // 每个行星都有一个轨道
        },

      ]
      return list
    },
  },
  mounted() {

    this.$nextTick(() => {
      this.initThree();
      this.initCameraAnimation(); // 开始视角动画
      window.addEventListener('resize', this.onWindowResize);
    });
  },
  methods: {
    add() {
      // 当水星队伍得分时
      this.increaseScore('地球')
      // this.increaseScore('地球2')
      
    },
    // 排名前三的飞船加分时候的特写镜头
    showCloseupForTopThree() {
    // 首先按照分数对行星排序，分数从高到低
    const sortedList = this.list.filter(planet => planet.name !== '太阳').sort((a, b) => b.score - a.score);
    const topThree = sortedList.slice(0, 3); // 前三名行星

    if (topThree.length > 0) {
      const topPlanet = topThree[0]; // 获取第一名行星
      const spaceship = this.scene.getObjectByName(topPlanet.name); // 获取飞船对象

      if (spaceship) {
        // 执行摄像机特写动画
        this.animateCameraCloseup(spaceship);
      }
    }
  },
   // 排名前三的飞船加分时候的特写镜头
  animateCameraCloseup(target) {
    const originalPosition = { x: camera.position.x, y: camera.position.y, z: camera.position.z }; // 记录原始视角位置
    const targetPosition = new THREE.Vector3(); // 用于存储飞船的位置
    target.getWorldPosition(targetPosition); // 获取飞船的世界坐标

    // 将摄像机缓动到飞船附近形成特写
    TweenLite.to(camera.position, 2, {
      x: targetPosition.x + 220,  // 使摄像机稍微远离飞船
      y: targetPosition.y + 220,
      z: targetPosition.z + 80,
      ease: "power1.inOut",
      onUpdate: () => {
        camera.lookAt(targetPosition); // 保持摄像机看向飞船
      },
      onComplete: () => {
        // 3秒后返回原视角
        setTimeout(() => {
          this.animateCameraToOriginal(originalPosition);
        }, 3000); // 保持特写3秒
      }
    });
  },
  animateCameraToOriginal(originalPosition) {
    // 将摄像机缓动返回原视角
    TweenLite.to(camera.position, 2, {
      x: originalPosition.x,
      y: originalPosition.y,
      z: originalPosition.z,
      ease: "power1.inOut",
      onUpdate: () => {
        camera.lookAt(new THREE.Vector3(0, 0, 0)); // 返回时对准中心点（比如太阳）
      }
    });
  },
     // 增加一个方法用于计算和显示排名前三的飞船
  showTopThreeLabels() {
    // 首先按照分数对行星排序，分数从高到低
    const sortedList = this.list.filter(planet => planet.name !== '太阳').sort((a, b) => b.score - a.score);
    
    // 选出前三名行星
    const topThree = sortedList.slice(0, 3);
    
    // 遍历前三名，给每个飞船添加标识
    topThree.forEach((planet, index) => {
      // 找到飞船对象
      const spaceship = this.scene.getObjectByName(planet.name);
      if (spaceship) {
        // 如果已经有标识，先移除旧标识
        const existingLabel = spaceship.children.find(child => child.userData && child.userData.type === 'topLabel');
        if (existingLabel) {
          spaceship.remove(existingLabel);
        }
        
        // 创建新的标识
        const div = document.createElement('div');
        div.className = 'top-label';
        div.innerHTML = `Top ${index + 1}`;
        div.style.color = 'gold';
        div.style.fontSize = '16px';
        div.style.fontWeight = 'bold';

        const label = new CSS2DObject(div);
        label.position.set(0, planet.R + 10, 0);  // 调整标识位置，使其显示在飞船上方
        label.userData = { type: 'topLabel' };  // 给标识添加一个标识符，方便后续查找和移除

        spaceship.add(label);
      }
    });
  },
   // 初始化动画，先显示太阳再绕远处飞船转一圈
   initCameraAnimation() {
  let startTime = null;
  const that = this;
  
  // 定义相机的初始状态（太阳中心）和最终状态（轨道最远处）
  const initialPosition = { x: 0, y: 0, z: 0 }; // 初始相机位置：太阳中心
  const finalPosition = { x: 1000, y: 500, z: 1000 }; // 轨道最远处
  const originalPosition = { x: 235, y: 535, z: 1100 }; // 最终恢复位置

  const duration = 5000; // 动画时长，5秒
  const orbitRadius = 800; // 定义轨道半径
  // 动画的核心函数
  function animateCamera(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsedTime = timestamp - startTime;
    const progress = Math.min(elapsedTime / duration, 1); // 计算动画进度

    // 第一阶段：从太阳中心移动到轨道最远处
    if (progress < 0.5) {
      const t = progress * 2; // 时间进度比例，0 到 1
      camera.position.x = initialPosition.x + t * (finalPosition.x - initialPosition.x);
      camera.position.y = initialPosition.y + t * (finalPosition.y - initialPosition.y);
      camera.position.z = initialPosition.z + t * (finalPosition.z - initialPosition.z);
      camera.lookAt(new THREE.Vector3(0, 0, 0)); // 始终对准太阳
    } 
    // 第二阶段：轨道飞船上方绕一圈
    else if (progress >= 0.5 && progress < 0.8) {
      const t = (progress - 0.5) * 2 * Math.PI; // 时间进度比例，0 到 2π，表示旋转角度
      camera.position.x = orbitRadius * Math.cos(t);
      camera.position.z = orbitRadius * Math.sin(t);
      camera.position.y = 500; // 固定高度，保持在飞船上方
      camera.lookAt(new THREE.Vector3(0, 0, 0)); // 相机始终看向太阳
    } 
    // 第三阶段：返回初始视角
    else {
      const t = (progress - 0.8) / 0.2; // 返回的进度，0 到 1
      camera.position.x = finalPosition.x + t * (originalPosition.x - finalPosition.x);
      camera.position.y = finalPosition.y + t * (originalPosition.y - finalPosition.y);
      camera.position.z = finalPosition.z + t * (originalPosition.z - finalPosition.z);
      camera.lookAt(new THREE.Vector3(0, 0, 0)); // 始终对准太阳
    }

    // 渲染场景

    if (progress < 1) {
      requestAnimationFrame(animateCamera); // 如果动画没有结束，继续下一帧
    }
  }

  requestAnimationFrame(animateCamera); // 启动动画
}

  ,
    // 创建宇宙(球形宇宙) ---TODO 这个解决模糊问题
    createUniverse(scene) {
      // let universeGeometry = new THREE.SphereGeometry(7000, 100, 100);
      // let universeMaterial = new THREE.MeshLambertMaterial({
      //   //高光材质
      //   map: new THREE.TextureLoader().load(universeImg),
      //   side: THREE.DoubleSide, //双面显示
      // });
      // //宇宙网格
      // let universeMesh = new THREE.Mesh(universeGeometry, universeMaterial);
      // universeMesh.name = "宇宙";
      // scene.add(universeMesh);
    // 加载纹理
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load('/assets/texture/universe.jpg');

  // 创建球体几何体，翻转法线让球体内部可见
  const geometry = new THREE.SphereGeometry(7000, 64, 64);
  geometry.scale(-1, 1, 1); // 反转几何体，让背景朝内渲染

  // 创建 Shader 材质
  const material = new THREE.ShaderMaterial({
    uniforms: {
      texture1: { value: texture } // 将加载的纹理传递给着色器
    },
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv; // 将 UV 坐标传递给片段着色器
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      uniform sampler2D texture1; // 纹理采样器
      varying vec2 vUv; // 接收顶点着色器传递的 UV 坐标
      void main() {
        gl_FragColor = texture2D(texture1, vUv); // 根据 UV 坐标获取纹理颜色
      }
    `,
    side: THREE.DoubleSide, // 显示几何体的两面
  });

  // 创建球体网格并添加到场景中
  const sphere = new THREE.Mesh(geometry, material);
   // 调整背景球体的默认角度
   sphere.rotation.x = Math.PI / 2;  // 围绕 X 轴旋转 30 度
  sphere.rotation.y = Math.PI / 1;  // 围绕 Y 轴旋转 45 度
  sphere.rotation.z = Math.PI / 3;  // 围绕 Z 轴旋转 22.5 度

  scene.add(sphere);

}
,

    jian(){ this.retreatPlanets()},
    initThree() {
      var that = this

      // 创建场景
      var scene = new THREE.Scene()
      this.scene = scene



      // const loader = new THREE.CubeTextureLoader();
      // const texture = loader.load([
      // '/public/img/2_RT.jpg', // 右侧
      // '/public/img/2_RT.jpg', // 右侧
      // '/public/img/2_RT.jpg', // 右侧
      // '/public/img/2_RT.jpg', // 右侧
      // '/public/img/2_RT.jpg', // 右侧
      // '/public/img/2_RT.jpg', // 右侧
      
      // ]);

      // scene.background = texture; // 将立方体贴图应用为场景背景
// 创建宇宙（背景宇宙球体）
this.createUniverse(scene);
// 调用 createFixedOrbits 函数并获取最外层和最内层圆环
const { outerCircleMesh, innerCircleMesh } = this.createFixedOrbits(scene);
      // 新增：添加点光源，模拟太阳的光源效果
      // 添加多个点光源，分别放置在不同的位置
      // const light1 = new THREE.PointLight(0xffffff, 3, 10000)
      // light1.position.set(1000, 1000, 1000) // 放在场景上方的某个位置
      // scene.add(light1)

      const light2 = new THREE.PointLight(0xffffff, 3, 10000)
      light2.position.set(0, 0, 0) // 放在场景的另一侧
      scene.add(light2)
      // const light3 = new THREE.PointLight(0xffffff, 3, 10000)
      // light2.position.set(-100, -100, -100) // 放在场景的另一侧
      // scene.add(light3)
      // 添加环境光，照亮整个场景
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.45) // 光的强度可以根据需求调整
      scene.add(ambientLight)
      // 创建网格模型


      // 创建轨道
      var arc = new THREE.ArcCurve(0, 0, 1, 0, 2 * Math.PI, true)

 // 初始化标签渲染器，仅需初始化一次
 if (!labelRenderer) {
        labelRenderer = new CSS2DRenderer();
        labelRenderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.domElement.style.position = 'absolute';
        labelRenderer.domElement.style.top = '0';
        labelRenderer.domElement.style.pointerEvents = 'none';
        this.$refs.home.appendChild(labelRenderer.domElement); // 确保标签渲染器也附加到 DOM 中
      }
      // 创建固定的轨道线，作为参考
      this.createFixedOrbits(scene)
      // 获取点数越多，圆弧越光滑
      var points = arc.getPoints(100) //返回一个vector2对象作为元素组成的数组
      var lineGeometry = new THREE.BufferGeometry()
      //setFromPoints方法的本质：遍历points把vector2转变化vector3
      lineGeometry.setFromPoints(points)
      // var material = new THREE.LineBasicMaterial({
      //   color: 0x0f4984,
      // })

      // 将MagmaFlare替换为太阳效果
      this.magmaFlare = new MagmaFlare(); // 创建MagmaFlare实例
      this.magmaFlare.position.set(0, 0, 0); // 将MagmaFlare放置在场景中心
      // 通过scale方法放大太阳（例如放大2倍）
  this.magmaFlare.scale.set(22, 22, 22); // 将X, Y, Z轴的缩放比例设置为2倍
      scene.add(this.magmaFlare); // 添加MagmaFlare到场景中

      // 繁星
      var plan = particle()
      scene.add(plan)
      
      this.list.forEach((type, index) => {
          if(type.name!='太阳'){
        //     const material = new THREE.MeshBasicMaterial({
        //   map: new THREE.TextureLoader().load(type.URL), // 行星的纹理
        // });
        // var mesh = addGeoMetry(geometry, type.URL, type.R)
        // mesh.name = type.name
        // mesh.data = type
        // mesh.angle = 2 * Math.PI * Math.random();



        // const material = new THREE.MeshStandardMaterial({
        //   map: new THREE.TextureLoader().load(type.URL),
        //   roughness: 0.7, // 表面粗糙度
        //   metalness: 0.5, // 金属感
        // })
        
        // const mesh = new THREE.Mesh(geometry, material) // 使用 MeshBasicMaterial 代替其他材质
        // mesh.scale.set(type.R, type.R, type.R) // 根据行星半径缩放
        // mesh.name = type.name
        // mesh.data = type
        // mesh.angle = 2 * Math.PI * Math.random() // 设置初始随机角度
        // scene.add(mesh) // 将行星添加到场景中
        // mesh.material = material // 设置为新材质
        // scene.add(mesh) //网格模型添加到场景中
        this.loadSpaceship(scene, type); // 对每个非太阳对象加载模型
        // 添加标签
        // var group = scene.getObjectByName(type.name)
        // var label = tag(group.name) //把名称obj.name作为标签
        // var pos = new THREE.Vector3()
        // group.getWorldPosition(pos) //获取obj世界坐标、
        // label.position.copy(pos) //标签标注在obj世界坐标
        // label.name = group.name
        // scene.add(label) //标签插入model组对象中
        // that.labelLst.push(label)
        // 添加标签
        // 创建轨道
        if (type.revolutionR) {
          // var line = circle(lineGeometry, material, type.revolutionR)
          // scene.add(line)
        }
          }
      })

      //环境光
      const ambient = new THREE.AmbientLight(0x404040, 0.6) // 调整光的强度
      scene.add(ambient)
      /**
       * 相机设置
       */
      const width = this.$refs.home.clientWidth
      const height = this.$refs.home.clientHeight
      //创建相机对象
      camera = new THREE.PerspectiveCamera(45, width / height, 1, 13000)
      camera.position.set(
        235.0912850575463,
        935.0912850575461,
        834.0365140230186
      ) //设置相机位置
      camera.lookAt(scene.position) //设置相机方向(指向的场景对象)

      /**
       * 创建渲染器对象
       */
      renderer = new THREE.WebGLRenderer({
        antialias: true, //开启锯齿
      })
      renderer.setSize(width, height) //设置渲染区域尺寸
      this.$refs.home.appendChild(renderer.domElement)
      that.$refs.home.appendChild(labelRenderer.domElement)
      let clock = new THREE.Clock(); // 用于计算时间增量

      // 渲染函数
      function render() {
        const delta = clock.getDelta(); // 计算时间增量
 // 更新所有行星的动画
 that.list.forEach((planet) => {
    if (planet.mixer) {
      setTimeout(() => {
        planet.mixer.update(delta); // 更新动画
      }, 2222);
    }
  });
         // 更新MagmaFlare动画效果
        setTimeout(() => {
         
          that.magmaFlare.update();
        }, 111);
  // 让最外侧的圆环慢慢旋转
  if (outerCircleMesh) {
        outerCircleMesh.rotation.z += 0.002; // 调整旋转速度
      }

      // 让最内侧的圆环也缓慢旋转
      if (innerCircleMesh) {
        innerCircleMesh.rotation.z -= 0.002; // 反方向旋转
      }
      
        scene.children.forEach((type) => {
          if (
            type.type === 'Group' &&
            type.data &&
            type.data.revolutionR !== undefined &&
            type.data.revolutionR !== 0
          ) {
            // 太阳不参与逻辑
            type.rotateY(0)
            type.angle += 0.001 // 每次执行render角度新增加
            var x = type.data.revolutionR * Math.sin(type.angle) //地球x坐标计算
            var z = type.data.revolutionR * Math.cos(type.angle) //地球z坐标计算
            // 设置地球xz坐标，实现公转动画
            type.position.set(x, 0, z)
            // 计算相机和天体的距离
            const distance = camera.position.distanceTo(type.position)
// 查找并控制标签的可见性
if (type.children.length > 0) {
  const label = type.children.find((child) => child instanceof CSS2DObject);
  
}

          }
        })
        // 如果有最外侧的轨道纹理，可以让它轻微旋转
        
        renderer.render(scene, camera) //执行渲染操作
        labelRenderer.render(scene, camera) //执行渲染标签层
        requestAnimationFrame(render) //请求再次执行渲染函数render，渲染下一帧
      }

      // 创建Raycaster对象用于检测鼠标点击事件
      const raycaster = new THREE.Raycaster()
      const mouse = new THREE.Vector2()

      window.addEventListener('click', (event) => {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

        // 通过鼠标点的位置和当前相机更新Raycaster
        raycaster.setFromCamera(mouse, camera)

        // 计算物体和Raycaster的焦点
        const intersects = raycaster.intersectObjects(scene.children)

        // 如果有物体被点击
        if (intersects.length > 0) {
          const selectedObject = intersects[0].object
          console.log(selectedObject,'selectedObjectselectedObject111111111');
          
         // 检查物体是否为行星
    if (selectedObject.name && this.list.some(planet => planet.name === selectedObject.name)) {
      // 如果物体是行星，则弹窗显示其名称
      alert(`点击了行星: ${selectedObject.name}`);
      if (selectedPlanet) {
            // 显示行星信息
            this.planetMsg = selectedObject;
          } else {
            // 如果点击的是其他物体，隐藏行星信息
            this.planetMsg = null;
          }
    }

          // 这里可以弹出更多详细信息或使用UI框展示更多内容
        }
      })

      render()

      // 渲染循环
      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        labelRenderer.render(scene, camera); // 添加标签渲染器
      };
      animate();
      var controls = new OrbitControls(camera, renderer.domElement)//不能删
      this.scene = scene
    },
    // 行星-飞船

    loadSpaceship(scene, planet) {
      const loader = new GLTFLoader();
      let mixer; // 动画混合器
      // 加载飞船模型
      loader.load(planet.modelPath, (gltf) => {
        const spaceship = gltf.scene;
        spaceship.name = planet.name; // 确保设置了正确的名称
        spaceship.data = planet;  // 确保添加了数据
        // 缩放飞船，使其替代行星的球体
        spaceship.scale.set(planet.R, planet.R, planet.R);

        // 初始随机位置
        const angle = Math.random() * Math.PI * 2;
        const x = planet.revolutionR * Math.sin(angle);
        const z = planet.revolutionR * Math.cos(angle);
        spaceship.position.set(x, 0, z);
        spaceship.angle = angle;

        // 添加到场景
        scene.add(spaceship);
        // 创建标签元素
        const div = document.createElement('div');
        div.className = 'msg-div2';
        div.innerHTML = `<div class="parameter-div"><div class="name">${planet.name}</div></div>`;
        // 确保标签允许接收点击事件
        div.style.pointerEvents = 'auto';
        // 将 click 事件绑定到实际的 DOM 元素
        // 全局状态对象，用于追踪每个行星标签的显示状态
        const labelVisibilityState = {};

        // 初始化时，将所有标签设为可见状态
        this.list.forEach((planet) => {
          labelVisibilityState[planet.name] = false;  // 默认所有标签可见
        });

        div.addEventListener('click', (event) => {
              console.log(`点击了 ${planet.name} 标签66`);
              event.stopPropagation();  // 防止事件冒泡到其他层级
        // 切换当前行星标签的显示状态
        if (this.labelVisibilityState[planet.name]) {
            label.element.style.display = 'none'; // 隐藏标签
          } else {
            label.element.style.display = 'block'; // 显示标签
          }

          // 手动隐藏标记为 true，避免渲染循环继续控制该标签
          this.manualHideFlag = true;

          // 设置 3 秒后自动恢复为渲染循环控制
          setTimeout(() => {
            this.manualHideFlag = false; // 恢复渲染循环控制标签显示
          }, 3000);
          
          // 更新全局状态
          this.labelVisibilityState[planet.name] = !this.labelVisibilityState[planet.name];

          // 调用方法显示行星详情
          this.showPlanetDetail(planet, event);
            });

        const label = new CSS2DObject(div);
        label.position.set(0, planet.R +0, 0);  // 将标签放置在飞船上方
        spaceship.add(label);  // 把标签添加到飞船上

        // 更新飞船位置和朝向
        const updateSpaceshipPosition = () => {
          spaceship.angle += 0.00001;  // 更新角度
          const x = planet.revolutionR * Math.sin(spaceship.angle);
          const z = planet.revolutionR * Math.cos(spaceship.angle);
          spaceship.position.set(x, 0, z);

          // 飞船始终朝向太阳
          const sunPosition = new THREE.Vector3(0, 0, 0);
          spaceship.lookAt(sunPosition);
    
          requestAnimationFrame(updateSpaceshipPosition);
        };
        updateSpaceshipPosition();
          // 创建动画混合器
          mixer = new THREE.AnimationMixer(spaceship);
           // // 将 mixer 添加到 this 以便在渲染循环中更新
           planet.mixer = mixer;
            // 遍历模型中的所有动画片段，并创建动画动作
    planet.actions = gltf.animations.map((clip) => mixer.clipAction(clip));

  // 默认不播放动画，加载完成后动画处于停止状态
  planet.actions.forEach((action) => action.stop());

  // 保存 mixer 和动画动作到 planet 对象中，以便在加分时启动动画
         
      }, undefined, (error) => {
        console.error('加载飞船模型时出错:', error);
      });
    },
    showPlanetDetail(planet, event) {
        // 切换 planetDetailVisible 的状态
        this.planetDetailVisible = !this.planetDetailVisible;

        // 记录标签的点击位置
        this.detailPosition = {
          top: event.clientY,  // 点击时鼠标的Y坐标
          left: event.clientX  // 点击时鼠标的X坐标
        };

        // 更新 planetMsg 为点击的行星
        if (this.planetDetailVisible) {
          this.planetMsg = planet;
          
          // 如果详情显示，启动定时器3秒后自动关闭
          setTimeout(() => {
            this.planetDetailVisible = false;
          }, 3000);  // 3秒后关闭
        }
      },
    onWindowResize() {
      // Update camera
      const width = this.$refs.home.clientWidth
      const height = this.$refs.home.clientHeight
      camera.aspect = width / height
      camera.updateProjectionMatrix()
      console.log(
        camera.position.x + ',' + camera.position.y + ',' + camera.position.z
      )
      // Update renderer
      renderer.setSize(width, height)
      labelRenderer.setSize(width, height)
    },
    // 创建固定的参考轨道线
    // 修改 createFixedOrbits 生成固定轨道线，并为最外侧的轨道添加酷炫效果
    createGlowOrbitMaterial() {
      const textureLoader = new THREE.TextureLoader()
      const texture = textureLoader.load('/public/img/haiwangxing.jpg') // 加载轨道纹理

      return new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true, // 使纹理的透明部分生效
        opacity: 0.8, // 设置不透明度
        side: THREE.DoubleSide, // 确保双面可见
      })
    },
    createFixedOrbits(scene) {
    const numOrbits = 5 // 轨道数量
    const minRadius = 100 // 最小轨道半径
    const gap = 150 // 每条轨道的间距
    let outerCircleMesh = null; // 保存最外层的圆环
    let innerCircleMesh = null; // 保存最内层的圆环

    for (let i = 0; i < numOrbits; i++) {
      const radius = minRadius + i * gap
      const arc = new THREE.ArcCurve(0, 0, radius, 0, 2 * Math.PI, true)
      const points = arc.getPoints(100)
      const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)

      // 判断是否是最外侧轨道或最内侧轨道
      let material
      if (i === numOrbits - 1 || i === 1) { // 最外侧或最内侧
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('/public/img/rotationBorder1.png'); // 加载圆环纹理

        material = new THREE.MeshBasicMaterial({
          map: texture,
          transparent: true, // 使纹理的透明部分生效
          opacity: 1.0, // 设置不透明度
          side: THREE.DoubleSide, // 双面显示
          depthWrite: false, // 禁止深度写入，避免闪烁问题
        });

        const circleGeometry = new THREE.CircleGeometry(radius + 10, 64); // 创建一个圆形几何体
        const circleMesh = new THREE.Mesh(circleGeometry, material);
        circleMesh.rotation.x = Math.PI / 2; // 将圆形平面与水平面对齐

        if (i === numOrbits - 1) {
          outerCircleMesh = circleMesh; // 最外侧圆环
        } else {
          innerCircleMesh = circleMesh; // 最内侧圆环
        }

        scene.add(circleMesh); // 添加带有纹理的圆环作为轨道
      } else {
        material = new THREE.LineBasicMaterial({
          color: 0x0f4984,
          transparent: true,
          opacity: 0.5,
        });
      }

      const line = new THREE.LineLoop(lineGeometry, material);
      line.rotateX(Math.PI / 2);
      scene.add(line); // 添加轨道线到场景
    }

    // 将 outerCircleMesh 和 innerCircleMesh 返回以供后续使用
    return { outerCircleMesh, innerCircleMesh };
  },

 // 随机增加所有行星的分数
  increaseScore(planetName) {
    let maxScore = 0;
    const planet = this.list.find(p => p.name === planetName);

    if (planet) {
      const spaceship = this.scene.getObjectByName(planet.name);
      if (spaceship) {
        // 在飞船上方显示分数
        this.showScoreLabel(spaceship, 10, planet.name);

        // 启动尾焰动画和翻滚动画
    // 启动所有动画
    planet.actions.forEach((action) => action.play());
      // 3秒后停止动画
      setTimeout(() => {
        // planet.actions.forEach((action) => action.stop());
      }, 10000);
      }
    }
    this.list.forEach((team) => {
      if (team.name !== '太阳') {  // 跳过太阳
        const randomIncrease = 10; // 随机增加分数
          // 获取当前飞船对象
          const spaceship = this.scene.getObjectByName(team.name);
          

        if (team.name === planetName) {
        team.score += 10; // 每次加10分
        if (spaceship) {
            // 在飞船上方显示分数
            this.showScoreLabel(spaceship, randomIncrease,team.name);

            // 创建并添加粒子系统
            const particleSystem = this.createParticleSystem();
            particleSystem.position.copy(spaceship.position);
            this.scene.add(particleSystem);
            console.log('粒子系统已添加'); // 调试：确认粒子添加
            // 粒子效果移动并使用 fadeOutParticleSystem 逐渐淡出
            this.fadeOutParticleSystem(particleSystem); // 调用粒子淡出效果
            // 粒子效果移动并在1秒后淡出和移除
          }
    
      }
        // 检查是否是当前最高分
        if (team.score > maxScore) {
          maxScore = team.score;
        }

        // 更新行星与太阳的距离
        const scoreRatio = team.score / this.totalScore;
        team.revolutionR = this.calculateRevolutionR(scoreRatio);
      }
    });

    // 检查最高分是否超过总分的 85%
    while (maxScore > this.totalScore * 0.85) {
      this.totalScore *= 1.2;  // 将总分增加 20%
      this.totalScore = this.totalScore.toFixed(0);
      setTimeout(() => {
        this.retreatPlanets();   // 所有行星后退
      }, 111);
      maxScore = Math.max(...this.list.map(team => team.score)).toFixed(0);  // 重新计算最高分
      this.HighScore = maxScore;
      this.HighScoreAVE = this.HighScore / this.totalScore;
    }
    // 调用方法更新前三名标识
    this.showTopThreeLabels();
    this.showCloseupForTopThree();
  },

  // 创建飞船粒子
  // 创建发光的飞船粒子系统
  createParticleSystem() {
    let that = this
    const particleCount = 500; // 增加粒子数量，原来是 100
    const particles = new THREE.BufferGeometry();
    const positions = [];
    const sizes = []; // 为每个粒子添加尺寸

    for (let i = 0; i < particleCount; i++) {
      // 生成粒子随机位置，让它们分布得更开
      // 生成粒子随机位置，让它们分布在飞船后方（负Z轴方向）
      const randomOffset = 10; // 控制喷气的范围
      const x = Math.random() * 100 - 50; // 原来是 50，增加范围
      const y = Math.random() * 100 - 50;
      const z = Math.random() * 100 - 50;
      positions.push(x, y, z);

      // 每个粒子的随机大小，模拟不同亮度和尺寸
      sizes.push(Math.random() * 1.5 + 0.5); // 尺寸从 0.5 到 2 之间变化
    }

    particles.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    particles.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1)); // 设置粒子尺寸

    // 创建材质，启用透明度并使用 AdditiveBlending 以获得发光效果
    const particleMaterial = new THREE.PointsMaterial({
      color: 0xff0a00, // 颜色设置为更亮的颜色
      size: 2, // 默认粒子大小
      transparent: true, // 启用透明度
      opacity: 0.9, // 粒子稍微透明，0.9 可以提升发光效果
      blending: THREE.AdditiveBlending, // 使用加法混合模式，让粒子看起来像发光的
      depthWrite: false, // 禁止深度写入，防止粒子互相遮挡
    });

    // 创建粒子系统
    const particleSystem = new THREE.Points(particles, particleMaterial);
    return particleSystem;
  },
    // 删除飞船粒子
    fadeOutParticleSystem(particleSystem, duration = 2000) {
      let startTime = null;
    let that = this
      // 使用 requestAnimationFrame 实现粒子淡出动画
      function fadeOut(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = timestamp - startTime;
        const opacity = Math.max(1 - progress / duration, 0); // 2秒内将透明度从1变为0

        // 遍历粒子的材质并减少透明度
        particleSystem.material.opacity = opacity;

        if (opacity > 0) {
          requestAnimationFrame(fadeOut); // 继续执行下一帧
        } else {
        // 完全透明后移除粒子系统
        if (that.scene) {
          that.scene.remove(particleSystem); // 确保访问到 this.scene
            console.log('粒子系统已移除');
          }
        }
      }

      requestAnimationFrame(fadeOut.bind(this)); // 启动动画
    }
,
// 创建显示分数标签的方法

showScoreLabel(spaceship, score,name) {
  const div = document.createElement('div');
  div.className = 'score-label';
  div.innerHTML = `${name}队+${score}分`;
  div.style.color = 'yellow';
  div.style.fontSize = '20px';
  div.style.fontWeight = 'bold';
  div.style.opacity = '1';

  const label = new CSS2DObject(div);
  label.position.set(0, spaceship.scale.y + 5, 0);
  spaceship.add(label);


  let startTime = null;

  // 使用 requestAnimationFrame 实现淡出动画
  function fadeOut(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = timestamp - startTime;
    const opacity = Math.max(1 - progress / 2000, 0); // 2秒内将透明度从1变为0
    div.style.opacity = opacity;

    if (opacity > 0) {
      requestAnimationFrame(fadeOut); // 继续执行下一帧
    } else {
      spaceship.remove(label); // 完全透明后移除标签
      div.remove(); // 从DOM中移除
    }
  }

  requestAnimationFrame(fadeOut); // 启动动画
}

,
  // 让所有行星统一后退一定距离，太阳不受影响
  retreatPlanets() {
    this.list.forEach((team) => {
      if (team.name !== '太阳') {  // 跳过太阳
        team.revolutionR += 20 * this.K;  // 所有行星统一后退 20 * K 的距离
      }
    });
  },

  // 计算 revolutionR，根据分数比例来计算行星距离
  calculateRevolutionR(scoreRatio) {
    const maxDistance = 120 * this.K; // 最大距离
    const minDistance = 20 * this.K;  // 最小距离
    return Math.max((1 - scoreRatio) * maxDistance, minDistance);
  },
  },
}
</script>

<style lang="scss">
.top-label {
  background-color: rgba(255, 215, 0, 0.7);
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  pointer-events: none;
}

.home {
  width: 100%;
  height: 100%;
  background: #053d79;
  position: fixed;
}

.tags {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  margin-top: -50px;
}

.msg-div {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  border-radius: 5px;
  z-index: 9999999;
  pointer-events: auto;
  left: 10px !important;
  top: 10px !important;
  transform: translateY(-50%);
  max-width: 200px;
  text-align: center;
  user-select: none;
}

.parameter-div .name {
  font-size: 16px;
  font-weight: bold;
  color: rgb(135, 143, 255);
}

.planet-detail {
  position: absolute;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 10px;
  z-index: 9999;
}
.score-label {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2s ease-in-out;
}



</style>